<template>
	<view class="content">
		<scroll-view class="scroll-Y" scroll-y="true">
			<!-- 顶部收入统计区域 -->
			<view class="header">
				<view class="total-income">
					<text class="title">{{ $t('data.str1') }}</text>
					<text class="amount">{{total}}</text>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">{{cash}}</text>
						<text class="stat-title">{{ $t('comm.str7') }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{wechat}}</text>
						<text class="stat-title">{{ $t('comm.str8') }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ali}}</text>
						<text class="stat-title">{{ $t('comm.str9') }}</text>
					</view>
				</view>
			</view>

			<view class="device-view">
				<view class="deive-row">
					<view class="device-row-item">
						<view class="device-value">{{cashRegister}}</view>
						<view class="device-title">{{$t('comm.str10')}}</view>
					</view>
					<view class="device-row-item">
						<view class="device-value">{{posMachine}}</view>
						<view class="device-title">{{$t('comm.str11')}}</view>
					</view>
				</view>
				<view class="deive-row">
					<view class="device-row-item">
						<view class="device-value">{{coninMachine}}</view>
						<view class="device-title">{{$t('comm.str12')}}</view>
					</view>
					<view class="device-row-item">
						<view class="device-value">{{wechatProgram}}</view>
						<view class="device-title">{{$t('comm.str13')}}</view>
					</view>
				</view>
			</view>
			<view class="device-view">
				<view class="deive-row">
					<view class="device-row-item">
						<view class="device-value">{{totalOrder}}</view>
						<view class="device-title">{{$t('data.str18')}}</view>
					</view>
					<view class="device-row-item">
						<view class="device-value">{{sellOrder}}</view>
						<view class="device-title">{{$t('data.str19')}}</view>
					</view>
				</view>
				<view class="deive-row">
					<view class="device-row-item">
						<view class="device-value">{{returnOrder}}</view>
						<view class="device-title">{{$t('data.str20')}}</view>
					</view>
					<view class="device-row-item">
						<view class="device-value">{{returnTotal}}</view>
						<view class="device-title">{{$t('data.str21')}}</view>
					</view>
				</view>
			</view>
			<view class="button-view">
				<view class="item-button" @click="goRevenueReport">
					<image class="iamge" src="/static/revenue_daily_report.png"></image>
					<view class="button-title">{{$t('data.str22')}}</view>
				</view>
				<view class="item-button" style="margin-left: 15rpx;margin-right: 15rpx;" @click="goHandoverRecord">
					<image class="iamge" src="/static/handover_record.png"></image>
					<view class="button-title">{{$t('data.str23')}}</view>
				</view>
				<view class="item-button" @click="goShangmengRecord">
					<image class="iamge" src="/static/shangmeng_record.png"></image>
					<view class="button-title">{{$t('data.str24')}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "data-revenue",
		data() {
			return {
				total: 150.00,
				cash: 0.00,
				wechat: 0.00,
				ali: 0.00,
				cashRegister: 0.00,
				posMachine: 0.00,
				coninMachine: 0.00,
				wechatProgram: 0.00,
				totalOrder: 0,
				sellOrder: 0,
				returnOrder: 0,
				returnTotal: 0.00,
			};
		},
		methods:{
			goRevenueReport(){
				uni.navigateTo({
					url:'/pages/home/revenue-report'
				})
			},
			goHandoverRecord(){
				uni.navigateTo({
					url:'/pages/home/handover-record'
				})
			},
			goShangmengRecord(){
				uni.navigateTo({
					url:'/pages/home/shangmeng-record'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		padding: 15rpx;
	}

	.scroll-Y {
		flex: 1;
		min-height: 0;
		/*避免内容溢出*/
		padding-bottom: 20rpx;
		width: 100%;
	}

	/* 顶部区域样式 */
	.header {
		background-image: linear-gradient(120deg, #FF2916 0%, #FF542E 100%);
		width: 100%;
		height: fit-content;
		border-radius: 15rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.total-income {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 28rpx;
		color: #fff;
	}

	.amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 10rpx;
	}

	.stats-row {
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.stat-title {
		font-size: 24rpx;
		color: #fff;
	}

	.stat-value {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 5rpx;
	}

	.device-view {
		display: flex;
		height: fit-content;
		flex-direction: column;
		background-color: white;
		border-radius: 15rpx;
		width: 100%;
		margin-top: 15rpx;
	}

	.deive-row {
		display: flex;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.device-row-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.device-value {
		font-size: 32rpx;
		font-weight: 600;
	}

	.device-title {
		font-size: 24rpx;
		color: gray;
	}

	.button-view {
		display: flex;
		height: fit-content;
		width: 100%;
		margin-top: 15rpx;
	}

	.iamge {
		width: 60rpx;
		height: 60rpx;
	}

	.item-button {
		flex: 1;
		display: flex;
		height: 150rpx;
		background-color: white;
		border-radius: 15rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.button-title {
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 15rpx;
	}
</style>